<template>
    <div class="layui-form-item">
        <div class="layui-row">
            <div class="layui-col-xs7">
                <label class="layadmin-user-login-icon layui-icon <%= icon %>"></label>
                <input type="<%= inputType %>" id="<%= 'input-' + inputType +'-'+ name %>" name="<%= name %>"
                    <% if ( verify ) { %> lay-verify="<%= verify %>" <% } %> placeholder="<%= placeholder %>"
                    class="layui-input">
            </div>
            <div class="layui-col-xs5">
                <div style="margin-left: 10px;"> 
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="phone-code-<%= name %>">获取验证码</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script name="compile">
    function templateCompile(data) {
        var defaultData = {
            type: "module",
            placeholder: "",
            inputType: "text",
            verify: "required",
            phoneVerify:false
        };
        var callback = {
            success: true,
            result: Object.assign(defaultData, data)
        };
        if (!data.placeholder) {
            return {
                success: false,
                result: "请输入表单提示，参数名：placeholder"
            };
        }
        if (!data.name) {
            return {
                success: false,
                result: "请输入参数名称，参数名：name"
            };
        }
        if (!data.icon) {
            return {
                success: false,
                result: "请选择表单图标，参数名：icon"
            };
        }
        if (!data.requestUrl) {
            return {
                success: false,
                result: "请输入发送短信验证码地址，参数名：requestUrl"
            };
        }
        if (!data.method) {
            return {
                success: false,
                result: "请输入发送短信验证码请求方式，参数名：method"
            };
        }
        if (!data.phoneInputName) {
            return {
                success: false,
                result: "请输入手机号输入框的name值，参数名：phoneInputName"
            };
        }
        return callback;
    }
</script>
<script name="templateScript">
    var clear;
    var codeSendState = true;
    var second = 60;
    $("#phone-code-<%= name %>").on("click", function () {
        var inputPhone = $("#input-text-<%= phoneInputName %>");
        var phoneValue = inputPhone.val();
        var _this = this;
        if(!codeSendState){
            popup.msg("短信验证码已发送");
            inputPhone.focus();
            return false;
        }
        if (!phoneValue) {
            popup.msg("请输入手机号"); 
            inputPhone.focus();
            return false;
        }
        <% phoneVerify.forEach(function(item){ %>
            if (<%- item.rule %>.test(phoneValue)) {
                popup.msg("<%- item.prompt %>"); 
                inputPhone.focus();
                return false;
            }
        <% }); %>
        codeSendState = false;
        $http.<%= method %>("<%= requestUrl %>", {
            <%= name %>: phoneValue
        }, {}, function (res) {
            $(_this).text("60秒后重发");
            clear = setInterval(function(){
                second--;
                $(_this).text(second+"秒后重发");
                if(second <= 0){
                    codeSendState = true;
                    $(_this).text("获取验证码");
                    clearInterval(clear);
                }
            },1000);
        },function(err){
            codeSendState = true;
        });
    });
</script>